<template>
  <div class="login">
    <div class="logo">
      <div>
        <span style="font-weight: bold"
          >YouYuSC<span style="color: #d7291d">.</span>art</span
        >
        <span style="margin-left: 0.2885rem">又玄数艺</span>
        <div
          style="
            font-size: 0.1923rem;
            margin-top: 0.2404rem;
            letter-spacing: 0.125rem;
          "
        >
          打造<span style="font-weight: bold; font-size: 0.1923rem">中国</span
          >头部数字艺术平台
        </div>
      </div>
    </div>

    <div class="loginform">
      <div class="mobile">
        <input
          type="text"
          v-model="form.mobile"
          placeholder="账号"
          @input="CheckPhone(form.mobile)"
        />
      </div>
      <div class="password">
        <input type="password" v-model="form.password" placeholder="密码" />
      </div>
      <div class="smscode">
        <input type="text" placeholder="请输入验证码" v-model="form.captcha" />
        <div class="sendbtn" @click="clickSendCode">{{ codeText }}</div>
      </div>
      <div class="smscode">
        <input type="text" placeholder="请输入邀请码(选填)" v-model="form.invite_code" />
      </div>
    </div>
    <all-btn :title="title" :loading="loading" @click="register" />

    <van-checkbox v-model="checked" checked-color="#18191a" icon-size=".2885rem">
      <div>
        <span style="color: #767676">请勾选</span>
        <router-link style="font-weight: bold" to="agree">用户协议</router-link>
        <span style="color: #767676">和</span>
        <router-link style="font-weight: bold" to="agree">隐私政策</router-link>
      </div>
    </van-checkbox>

    <div class="bottom">
      <router-link to="findpass" style="margin-right: .1923rem; font-weight: bold;color:black">忘记密码</router-link>
      <span>|</span>
      <router-link to="login" style="margin-left: .1923rem; font-weight: bold;color:black">去登录</router-link>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { Toast } from "vant";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import commonStore from "../store/common";
import checkPhone from "../util/checkPhone";

// 获取路由标题
const route = useRoute();
const title = computed(() => route.meta.title);

// 手机号格式校验
let checkPhoneFlage = ref(false);
const CheckPhone = (mobile) => {
  if (checkPhone.checkPhone(mobile)) {
    checkPhoneFlage.value = true;
  } else {
    checkPhoneFlage.value = false;
  }
};

// 注册
const router = useRouter();
const common = commonStore();
const checked = ref(false);
let loading = ref(false);
// const setting = computed(() => common.setting);

const form = ref({
  mobile: "",
  password: "",
  captcha: "",
  invite_code: route.query.invite ? window.localStorage.getItem(process.env.NFT_APP_INVITE) : ''
});

const register = () => {
  if (!checked.value) {
    return Toast.fail("请勾选用户协议和隐私政策");
  }
  if (form.value.password == "") {
    return Toast.fail("请输入密码");
  }
  if (form.value.code == "") {
    return Toast.fail("请输入验证码");
  }
  loading.value = true;
  common
    .register(form.value)
    .then(() => {
      loading.value = false;
      Toast.success("注册成功");
      router.push({ name: "login" });
    })
    .catch(() => {
      loading.value = false;
    });
};

// 验证码
// let requestId = ref("");
// onMounted(() => {
//   captcha_init();
// });
// watch(
//   () => setting.value.auth_code,
//   () => {
//     captcha_init();
//   }
// );
// let captcha = null;
// const captcha_init = () => {
//   if (setting.value.auth_code && !captcha) {
//     captcha = new window.TencentCaptcha(
//       setting.value.auth_code?.captcha_app_id,
//       (res) => {
//         if (res.ret != 0) {
//           loading.value = false;
//           return;
//         }
//         common
//           .captcha({ ticket: res.ticket, randstr: res.randstr })
//           .then((res1) => {
//             requestId.value = res1.requestId;
//             sendCode();
//           })
//           .catch((err) => {
//             console.log(err);
//             loading.value = false;
//           });
//       }
//     );
//   }
// };

// 发送验证码
let codeText = ref("发送验证码");
let sending = ref(false);
let timer = ref(null);
let time = 60;
onBeforeRouteLeave(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
const sendCode = () => {
  sending.value = true;
  codeText.value = "发送中...";
  common
    .sendCode({
      mobile: form.value.mobile,
      event:'register',
      //requestId: requestId.value,
    })
    .then(() => {
      Toast.success("发送成功");
      timer.value = setInterval(() => {
        codeText.value = time + "秒后再次获取";
        if (time == 0) {
          codeText.value = "发送验证码";
          sending.value = false;
          time = 60;
          clearInterval(timer.value);
        }
        time--;
      }, 1000);
    })
    .catch(() => {
      codeText.value = "发送验证码";
      sending.value = false;
      time = 60;
      clearInterval(timer.value);
    });
};

const clickSendCode = () => {
  if (sending.value === true) {
    return;
  }
  if (!checkPhoneFlage.value) {
    return Toast.fail("手机号格式错误");
  }
  // if (setting.value.auth_code) {
  //   captcha.show();
  // } else {
    sendCode();
 // }
};

// 验证码
</script>

<style lang="scss" scoped>
.login {
  .logo {
    span {
      font-size: 0.3846rem;
    }
    color: black;
    padding: 0.3846rem;
    padding-top: 0.7692rem;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 0.4808rem;
  }

  .loginform {
    padding: 0.3846rem;
    padding-top: 0.5769rem;

    input {
      font-size: 0.2885rem;
      width: 100%;
      margin-bottom: 0.7692rem;
      padding-bottom: 0.1923rem;
      border: none;
      border-bottom: 0.0192rem solid #e8e8e8;
    }
  }

  .smscode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3846rem;
    input {
      width: 60%;
    }
    .sendbtn {
      margin-top: -0.4808rem;
      color: black;
    }
  }

  .van-checkbox {
    margin-left: .3846rem;
  }

  .bottom {
    position: fixed;
    bottom: .3846rem;
    transform: translateX(-50%);
    left: 50%;
  }
}
</style>